import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class LabelTopPage extends StatefulWidget {
  const LabelTopPage({Key? key}) : super(key: key);

  @override
  _LabelTopPageState createState() => _LabelTopPageState();
}
class _LabelTopPageState extends State<LabelTopPage> {
  ScrollController _scrollController = new ScrollController();
    int currentIndex = 0;
  late List<double> heightList=[];
    List<GlobalKey> keyList = [
    GlobalKey(),
    GlobalKey(),
    GlobalKey(),
  ];
    bool isShow = false;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _scrollController.addListener(() {
      if (heightList == null||heightList.length==0) {
        heightList = [0.0, 0.0, 0.0];
        for (var i = 0; i < 3; i++) {
          RenderBox? renderBox = keyList[i].currentContext!.findRenderObject() as RenderBox?;
          heightList[i] = (renderBox!.localToGlobal(Offset.zero).dy -
              MediaQueryData.fromWindow(window).padding.top -
              56 -
              50-10);
        }
        print('111111$heightList');
      }else {

      if (_scrollController.position.pixels > heightList[0]) {
        setState(() {
          isShow = true;
        });
      } else {
        setState(() {
          isShow = false;
        });
      }
      }
      double offsetDouble = _scrollController.position.pixels;
      // print("滑动距离$offsetDouble");
      if (offsetDouble < heightList[1]) {
        currentIndex = 0;
      } else if (offsetDouble > heightList[1] && offsetDouble < heightList[2]) {
        currentIndex = 1;
      } else if (offsetDouble > heightList[2]) {
        currentIndex = 2;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(children: [
      CustomScrollView(
          physics: ClampingScrollPhysics(),
          controller: _scrollController,
          slivers: <Widget>[
            SliverAppBar(
              floating: true,
              snap: true,
              pinned: true,
              leadingWidth: 142.w,
              expandedHeight: 50,
              flexibleSpace: Container(
                height: 650.w,
                decoration: BoxDecoration(
                  image: new DecorationImage(
                    fit: BoxFit.cover,
                    image: new AssetImage(
                      'assets/images/eva_nav.png',
                    ),
                  ),
                ),
              ),
            ),
            SliverToBoxAdapter(
                child: Padding(
                    padding: EdgeInsets.symmetric(vertical: 0),
                    child: Column(children: [
                      Image.asset(
                        'assets/images/banner.png',
                      ),
                      Container(
                          padding: EdgeInsets.only(
                              left: 40.w, right: 40.w, top: 60.w, bottom: 60.w),
                          child: resultTitle('数据指数解读', () {})),
                      Container(
                          padding: EdgeInsets.only(
                              left: 40.w, right: 40.w, bottom: 60.w),
                          child: Container(
                            decoration: BoxDecoration(
                              borderRadius:
                                  BorderRadius.all(Radius.circular(28)),
                              gradient: LinearGradient(
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomRight,
                                  colors: [
                                    HexColor('#ffffff').withOpacity(0.4),
                                    HexColor('#ffffff').withOpacity(0.5)
                                  ]),
                              boxShadow: [
                                BoxShadow(
                                  color: HexColor('#ffffff'), //底色,阴影颜色
                                  offset: Offset(1, 1), //阴影位置,从什么位置开始
                                  // blurRadius: 2, //延伸距离,会有模糊效果
                                  spreadRadius: 1, //延伸距离,不会有模糊效果
                                )
                              ],
                            ),
                            child: Container(
                                padding: EdgeInsets.all(40.w),
                                child: Column(
                                  children: getdata(
                                      '数据指数解读数据指数解读数据指数解读数据指数解读数据指数解读数据指数解读数据指数解读数据指数解读'),
                                )),
                                
                          )),
                    ]))),

                     SliverToBoxAdapter(
                  child: Padding(
                      padding: EdgeInsets.symmetric(vertical: 0),
                      child: Column(
                              children: [
                                Container(
                                    padding: EdgeInsets.only(
                                      left: 40.w,
                                      right: 40.w,
                                    ),
                                    child: Column(
                                      children: [
                                        Column(
                                          children: [
                                            Container(
                                              key: keyList[0],
                                              alignment: Alignment.centerLeft,
                                              padding:
                                                  EdgeInsets.only(bottom: 28.w),
                                              child: Text(
                                                  'dfasdfasnfoafnafjn',
                                                  style: TextStyle(
                                                      fontSize: 36.sp,
                                                      fontWeight:
                                                          FontWeight.w600,
                                                      color:
                                                          HexColor('#333333'))),
                                            ),
                                            ListView.builder(
                                              padding: EdgeInsets.only(top: 0),
                                              itemCount: 10
                                                  ,
                                              shrinkWrap: true,
                                              physics:
                                                  new NeverScrollableScrollPhysics(),
                                              itemBuilder:
                                                  (BuildContext context,
                                                      int index2) {
                                                return Container(
                                                  margin: EdgeInsets.only(
                                                      bottom: 40.w),
                                                  child: Text(
                                                  'dfafdsasfa',
                                                  
                                                  ),
                                                );
                                              },
                                            )
                                          ],
                                        ),
                                        Column(
                                          children: [
                                            Container(
                                              key: keyList[1],
                                              alignment: Alignment.centerLeft,
                                              padding:
                                                  EdgeInsets.only(bottom: 28.w),
                                              child: Text(
                                                  'dfasfa',
                                                  style: TextStyle(
                                                      fontSize: 36.sp,
                                                      fontWeight:
                                                          FontWeight.w600,
                                                      color:
                                                          HexColor('#333333'))),
                                            ),
                                            ListView.builder(
                                              padding: EdgeInsets.only(top: 0),
                                              itemCount:10,
                                              shrinkWrap: true,
                                              physics:
                                                  new NeverScrollableScrollPhysics(),
                                              itemBuilder:
                                                  (BuildContext context,
                                                      int index2) {
                                                return Container(
                                                  margin: EdgeInsets.only(
                                                      bottom: 40.w),
                                                  child: Text('dfafa'),
                                                  
                                                );
                                              },
                                            )
                                          ],
                                        ),
                                        Column(
                                          children: [
                                            Container(
                                              key: keyList[2],
                                              alignment: Alignment.centerLeft,
                                              padding:
                                                  EdgeInsets.only(bottom: 28.w),
                                              child: Text(
                                                  'dfawf',
                                                  style: TextStyle(
                                                      fontSize: 36.sp,
                                                      fontWeight:
                                                          FontWeight.w600,
                                                      color:
                                                          HexColor('#333333'))),
                                            ),
                                            ListView.builder(
                                              padding: EdgeInsets.only(top: 0),
                                              itemCount: 100,
                                              shrinkWrap: true,
                                              physics:
                                                  new NeverScrollableScrollPhysics(),
                                              itemBuilder:
                                                  (BuildContext context,
                                                      int index2) {
                                                return Container(
                                                  margin: EdgeInsets.only(
                                                      bottom: 40.w),
                                                  child:Text('ds'),
                                                );
                                              },
                                            )
                                          ],
                                        ),
                                      ],
                                    )),
                                Container(
                                  width: 750.w,
                                  child: Offstage(
                                    offstage:true,
                                    child:  GestureDetector(
                                            onTap: () {
                                              
                                              
                                            },
                                            child: Align(
                                              alignment: Alignment.bottomCenter,
                                              child: ClipPath(
                                                child: Stack(
                                                  alignment: Alignment.center,
                                                  children: <Widget>[
                                                    Container(
                                                      height: 120.w,
                                                      decoration: BoxDecoration(
                                                        gradient: LinearGradient(
                                                            colors: [
                                                            Colors.blue,
                                                             Colors.green
                                                            ],
                                                            begin: Alignment
                                                                .centerLeft,
                                                            end: Alignment
                                                                .centerRight),
                                                        borderRadius:
                                                            BorderRadius.only(
                                                                topLeft: Radius
                                                                    .circular(
                                                                        24.w),
                                                                topRight: Radius
                                                                    .circular(
                                                                        24.w)),
                                                      ),
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                          MainAxisAlignment
                                                              .center,
                                                      crossAxisAlignment:
                                                          CrossAxisAlignment
                                                              .center,
                                                      children: <Widget>[
                                                        Visibility(
                                                          visible: false,
                                                          child: Container(
                                                            margin:
                                                                EdgeInsets.only(
                                                                    right:
                                                                        20.w),
                                                            width: 10.w,
                                                            height: 10.w,
                                                            decoration: BoxDecoration(
                                                                color: Colors
                                                                    .white,
                                                                borderRadius:
                                                                    BorderRadius
                                                                        .circular(
                                                                            10.w)),
                                                          ),
                                                        ),
                                                        Text(
                                                          'dfasfa',
                                                          style: TextStyle(
                                                              fontSize: 36.sp,
                                                              color: HexColor(
                                                                  '#FFFFFF'),
                                                          
                                                              fontWeight:
                                                                  FontWeight
                                                                      .w500),
                                                        )
                                                      ],
                                                    )
                                                  ],
                                                ),
                                              ),
                                            ),
                                          )
                                       ,
                                  ),
                                ),
                              ],
                            )
                          ),
                ),

          ]),

         isShow
                ?  Positioned(
                    top: MediaQueryData.fromWindow(window).padding.top + 56,
                    child: Container(
                      color: Colors.white,
                      width: MediaQuery.of(context).size.width,
                      height: 80.w,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          TabBarWidget(
                            title: 'tab1',
                            isSelect: currentIndex == 0 ? true : false ,
                            tap: () {
                              _scrollController.animateTo(heightList[0] + 5,
                                  duration: new Duration(milliseconds: 200),
                                  curve: Curves.ease);
                            },
                          ),
                          TabBarWidget(
                            title:'tab2',
                            isSelect:  currentIndex == 1 ? true : false,
                            tap: () {
                              _scrollController.animateTo(heightList[1] + 5,
                                  duration: new Duration(milliseconds: 200),
                                  curve: Curves.ease);
                            },
                          ),
                          TabBarWidget(
                            title: 'tab3',
                            isSelect: currentIndex == 2 ? true : false,
                            tap: () {
                              _scrollController.animateTo(heightList[2] + 5,
                                  duration: new Duration(milliseconds: 200),
                                  curve: Curves.ease);
                            },
                          ),
                        ],
                      ),
                    ),
                  ):Container()
    ]));
  }

  Widget resultTitle(title, fn) {
    return Stack(
      alignment: Alignment.bottomLeft,
      children: [
        Container(
          height: 18.w,
          width: 160.w,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [HexColor('#199BE2'), HexColor('#26CAD3').withOpacity(0)],
            ),
          ),
        ),
        Container(
            alignment: Alignment.centerLeft,
            child: Row(
              children: [
                Text(title,
                    style: TextStyle(
                        fontWeight: FontWeight.w600,
                        fontSize: 40.sp,
                        color: HexColor('#333333'))
                    //               color: HexColor('#26CAD3'),
                    ),
                GestureDetector(
                  onTap: () {
                    fn();
                  },
                  child: Container(
                    width: 50.w,
                    height: 50.w,
                    alignment: Alignment.center,
                    child: Image.asset(
                      'assets/images/banner.png',
                      height: 30.0.w,
                    ),
                  ),
                )
              ],
            )),
      ],
    );
  }

  getdata(String str) {
    List<Widget> list = [];
    for (var i = 0; i < 10; i++) {
      list.add(
        Container(
          alignment: Alignment.centerLeft,
          padding: EdgeInsets.only(bottom: 30.w),
          child: Text(
            str,
            style: TextStyle(
                fontSize: 30.w,
                fontWeight: FontWeight.w600,
                color: HexColor('#333333')),
          ),
        ),
      );
    }
    return list;
  }
}

class HexColor extends Color {
  static int _getColorFromHex(String hexColor) {
    hexColor = hexColor.toUpperCase().replaceAll("#", "");
    if (hexColor.length == 6) {
      hexColor = "FF" + hexColor;
    }
    return int.parse(hexColor, radix: 16);
  }

  HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
}

class TabBarWidget extends StatelessWidget {
  final bool isSelect;
  final String title;
  final Function tap;
  TabBarWidget({required this.isSelect, required this.title, required this.tap});
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        tap();
      },
      child: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Text(
              title,
              style: TextStyle(
                color: isSelect ? HexColor('#666666') : HexColor('#999999'),
                fontSize: 30.sp,
                fontWeight: isSelect ? FontWeight.bold : FontWeight.normal,
              ),
            ),
            isSelect
                ? Container(
                    height: 6.w,
                    width: 70.w,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(6)),
                      gradient: LinearGradient(
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                          colors: [HexColor('#199CE1'), HexColor('#25C7D4')]),
                    ),
                  )
                : Container()
          ],
        ),
      ),
    );
  }
}
